<template>
    <div
        class="back-top-container"
        v-show="is_show"
        @click="$bus.$emit('back_top')"
    >
        <Icon type="arrowUp" />
    </div>
</template>

<script>
import { debounce } from "@/utils";
import Icon from "@/components/Icon";

export default {
    mounted() {
        this.handle_scroll = debounce(this.show_back, 50);
        this.$bus.$on("main_scroll", this.handle_scroll);
    },
    beforeDestroy() {
        this.$bus.$off("main_scroll", this.handle_scroll);
    },
    components: {
        Icon,
    },
    data() {
        return {
            is_show: false,
        };
    },
    methods: {
        show_back(dom) {
            // 显示返回顶部按钮
            if (!dom) {
                this.is_show = false;
                return;
            }
            this.is_show = dom.scrollTop >= innerHeight;
        },
    },
};
</script>

<style lang="less">
@import url(~@/styles/var.less);
.back-top-container {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
    background-color: @info;
    position: fixed;
    right: 40px;
    bottom: 30px;
    cursor: pointer;
    z-index: 10;
    .iconfont {
        font-size: 25px;
        color: honeydew;
    }
}
</style>
